<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>锋华主页面</title>
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script src="js/jquery.color.js"></script>
		<script src="js/wookmark.min.js"></script>
		<script src="js/main.js"></script>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<link rel="stylesheet" href="css/reset.css">
		<link rel="stylesheet" href="css/main.css">
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

	</head>
	<body>
		<div id="ChooseCard">
			<p style="margin-top: 3em;">
				编辑商品信息
			</p>
			<p style="margin-top: 6em;">
				查看订单信息
			</p>
			<p style="margin-top: 9em;">
				购物中心
			</p>
			<p style="margin-top: 12em;">
				个人中心
			</p>
		</div>
		<div id="Ground">
			<div id="shop" style="width: 113em;height:67em;">
				<el-row>
					<el-button type="primary" @click.native="adduser()">添加</el-button>
					<el-button type="success" @click.native="DeleteShop()">删除</el-button>
					<el-button type="info" @click.native="Up()">刷新</el-button>
				</el-row>
				<template>
					<el-table :key="tableKey" :data="tableData" style="width: 100%" :cell-style="rowStyle">
						<el-table-column label="商品id" width="180" prop="inspect_item_conf_name" align="center">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.ShopId}}</span>
							</template>
						</el-table-column>
						<el-table-column label="商品名称" width="180" prop="inspect_item_conf_name" align="center">
							<template slot-scope="scope">
								<el-popover trigger="hover" placement="top">
									<p>商品名称: {{ scope.ShopName }}</p>
									<p>商品类型: {{ scope.ShopType }}</p>
									<div slot="reference" class="name-wrapper">
										<el-tag size="medium">{{ scope.row.ShopName}}</el-tag>
									</div>
								</el-popover>
							</template>
						</el-table-column>
						<el-table-column label="商品价格" width="180" prop="inspect_item_conf_name" align="center">
							<template slot-scope="scope">
								<el-popover trigger="hover" placement="top">
									<p>商品名称: {{ scope.row.ShopName}}</p>
									<p>商品类型: {{ scope.row.ShopType  }}</p>
									<div slot="reference" class="name-wrapper">
										<el-tag size="medium">{{ scope.row.ShopPrice }}</el-tag>
									</div>
								</el-popover>
							</template>
						</el-table-column>
						<el-table-column label="商品类型" width="180" prop="inspect_item_conf_name" align="center">
							<template slot-scope="scope">
								<el-popover trigger="hover" placement="top">
									<p>商品名称: {{ scope.row.ShopName }}</p>
									<p>商品类型: {{ scope.row.ShopType}}</p>
									<div slot="reference" class="name-wrapper">
										<el-tag size="medium">{{ scope.row.ShopType }}</el-tag>
									</div>
								</el-popover>
							</template>
						</el-table-column>
						<el-table-column label="商品描述" width="180" prop="inspect_item_conf_name" align="center">
							<template slot-scope="scope">
								<el-popover trigger="hover" placement="top">
									<p>商品名称: {{ scope.row.ShopName }}</p>
									<p>商品类型: {{ scope.row.ShopType  }}</p>
									<div slot="reference" class="name-wrapper">
										<el-tag size="medium">{{ scope.row.ShopDetail }}</el-tag>
									</div>
								</el-popover>
							</template>
					</el-table>
				</template>
				<el-dialog :title=dailogTitleType :visible.sync="dialogFormVisible">
					<el-form ref="form" :model="form" label-width="80px">
						<el-form-item label="商品名称">
							<el-input type="textarea" v-model="form.ShopName"></el-input>
						</el-form-item>
						<el-form-item label="商品价格">
							<el-input type="textarea" v-model="form.ShopPrice"></el-input>
						</el-form-item>
						<el-form-item label="商品类型">
							<el-input type="textarea" v-model="form.ShopType"></el-input>
						</el-form-item>
						<el-form-item label="商品描述">
							<el-input type="textarea" v-model="form.ShopDetail"></el-input>
						</el-form-item>
						<el-upload class="upload-demo" action="" :http-request="HttpRequest" :on-preview="handlePreview"
							:on-remove="handleRemove" multiple :limit="1" :on-exceed="handleExceed">
							<el-button size="small" type="primary">点击上传</el-button>
							<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
						</el-upload>
						<el-form-item>
							<el-button type="primary" @click="Plus">确定</el-button>
							<el-button @click="Plus_No">取消</el-button>
						</el-form-item>
					</el-form>
				</el-dialog>
				<el-dialog :title=dailogTitleType :visible.sync="dialogFormVisible2">
					<el-form ref="form" :model="Delete" label-width="80px">
						<el-form-item label="删除的Id">
							<el-input type="textarea" v-model="Delete.Id"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="deleteGround_Yes">确定</el-button>
							<el-button @click="deleteGround_No">取消</el-button>
						</el-form-item>
					</el-form>
				</el-dialog>
			</div>
			<div id="订单">

				<template>
					<el-radio-group v-model="size">
						<el-radio label="">默认</el-radio>
						<el-radio label="medium">中等</el-radio>
						<el-radio label="small">小型</el-radio>
						<el-radio label="mini">超小</el-radio>
					</el-radio-group>
					<el-dialog title="提示" :visible.sync=dialogVisible width="30%" :before-close="handleClose">
						<span>确定已完成了该订单了吗</span>
						<span slot="footer" class="dialog-footer">
							<el-button @click="dialogVisible = false">取 消</el-button>
							<el-button type="primary" @click="FineOrder()">确 定</el-button>
						</span>
					</el-dialog>
					<el-descriptions class="margin-top" v-for="a in e" :title="'订单编号'+String(a.OrderId)" :column="3" :size="size"
						border>
						<template slot="extra">
							<el-button type="primary" size="small" @click="fine(a)">完成订单</el-button>
						</template>
						<el-descriptions-item>
							<template slot="label">
								<i class="el-icon-s-shop"></i>
								卖方:
							</template>
							{{a.SellName}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template slot="label">
								<i class="el-icon-user"></i>
								买方:
							</template>
							{{a.BuyName}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template slot="label">
								<i class="el-icon-goods"></i>
								商品:
							</template>
							{{a.Shop}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template slot="label">
								<i class="el-icon-mobile-phone"></i>
								手机号
							</template>
							{{a.Iphone}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template slot="label">
								<i class="el-icon-location-outline"></i>
								居住地
							</template>
							{{a.Address}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template slot="label">
								<i class="el-icon-tickets"></i>
								数量
							</template>
							<el-tag size="small">{{a.Number}}</el-tag>
						</el-descriptions-item>
						<el-descriptions-item>
							<template slot="label">
								<i class="el-icon-wallet"></i>
								总价
							</template>
							{{a.TotalPrice}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template slot="label">
								<i class="el-icon-message-solid"></i>
								支付方式:
							</template>
							{{a.Pay}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template slot="label">
								<i class="el-icon-message-solid"></i>
								收货者姓名:
							</template>
							{{a.TheName}}
						</el-descriptions-item>
					</el-descriptions>
				</template>

			</div>
			<div id="grid">

				<el-row v-for="(a,g) in e " v-if="g%2==0||g===e.length-1">
					<div v-if="g!=e.length-1">
						<el-col :span="8" v-for="(w,index) in 2" :key="w" :offset="index > 0 ? 2 : 0">

							<el-card :body-style="{ padding: '0px' }">
								<img :src=e[index+g].ShopImg class="image">
								<div style="padding: 14px;">
									<span>用户：{{e[index+g].UserName}}</span>

									<div class="bottom clearfix">
										<time class="time">商品：{{e[index+g].ShopName}}</time>
										<el-button type="text" class="button" @click="o(e[index+g])">Go Shopping
										</el-button>
									</div>
								</div>
							</el-card>
						</el-col>
					</div>
					<div v-if="g===e.length-1&&g%2==0">
						<el-col :span="8" v-for="(w,index) in 1" :key="w" :offset="index > 0 ? 1  : 0">

							<el-card :body-style="{ padding: '0px' }">
								<img :src=e[index+g].ShopImg class="image">
								<div style="padding: 14px;">
									<span>用户：{{e[index+g].UserName}}</span>

									<div class="bottom clearfix">
										<p class="time">商品：{{a.ShopName}}</p>
										<el-button type="text" class="button" @click="o(e[index+g])">Go Shopping
										</el-button>
									</div>
								</div>
							</el-card>
						</el-col>
					</div>
				</el-row>
			</div>


		</div>
	</body>
	<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script>
		var i = 1;
		var index = -2;
		$("#ChooseCard>p").mouseenter(function() {
			$(this).animate({
				"background-color": "rgb(10,20,205)",
				"color": "white"
			}, 800);
			i = 1;
		});

		$("#ChooseCard>p").mouseleave(function() {
			if (i && $(this).index() != index) {
				$(this).animate({
					"background-color": "white",
					"color": "black"
				}, 800);
			}
		});

		$("#订单>div>button").mouseenter(function() {
			$(this).animate({
				"background-color": "#0097A7",
				"color": "white"
			}, 800);

		});
		$("#订单>div>button").mouseleave(function() {
			$(this).animate({
				"background-color": "#03A9F4",
				"color": "black"
			});
		});
		let ShopData;
		let grid = undefined;
		var Shops;
		var OrderData= undefined;
		var JD;
		//每当点击选项的时候，触发请求
		$("#ChooseCard>p").click(function() {

			$("#ChooseCard>p").css({
				"background-color": "white",
				"color": "black"
			});
			$(this).css({
				"background-color": "rgb(10,20,205)",
				"color": "white"
			});
			i = 0;
			index = $(this).index();
			$("#Ground>div").removeClass("ChooseGround").eq(index).addClass("ChooseGround");
			if (index == 2) {
				$.post("http://localhost/SelectAllShop", {},
					function(data) {
						Shops = JSON.parse(data);
						console.log(Shops.length);
						if (grid === undefined) {
							grid = new Vue({
								el: "#grid",
								data() {
									return {
										e: Shops
									}

								},
								methods: {
									o(s) {
										const json = JSON.stringify(s);

										window.location.href = "./shop.html?shop=" + json + " ";
									},
									h() {
										this.e = Shops;
										console.log(this.e);
									}
								}
							});
						} else {
							grid.h();
						}
					});
			}else if(index==1)
			{
				$.post("http://localhost/SelectUserOrderServlet",{},function(data){
					JD=JSON.parse(data);
					if (OrderData === undefined) {
						OrderData=new Vue({
							el: "#订单",
							data() {
								return {
									size: '',
									e: JD,
									dialogVisible: false,
									ThisData: {
										ShopSell: "",
										ShopBuy: "",
										Shop: "",
										Number: "",
										TotalPrice: "",
										Pay: "",
										Address: "",
										OrderId: "",
										Iphone: ""
									},
									
								}
							},
							methods: {
								fine(a) {
									this.dialogVisible = true;
									this.ThisData = a;
								},
								FineOrder() {
									var This=this;
									$.post("http://localhost//DeleteOrderServlet",{id:this.ThisData.OrderId},
									function(){
										for (var i = 0; i < This.e.length; i++) {
											if (This.e[i].OrderId == This.ThisData.OrderId) {
												This.e.splice(i, 1);
											}
											This.dialogVisible = false;
										}
									});
								},
								eh()
								{
									this.e=JD;
									console.log(this.e);
								}
							}
						
						});
						}else{
							OrderData.eh();
						
						}
					
				});
			}
		});
		new Vue({
			el: '#shop',
			data() {
				return {
					tableData: [],
					tableKey: 1,
					form: {
						ShopId: "",
						ShopName: "",
						ShopPrice: "",
						ShopType: "",
						ShopDetail: "",
						Files: new FormData()
					},
					Delete: {
						Id: ""
					},
					dialogFormVisible: false,
					dialogTitleType: "",
					dialogFormVisible2: false,

				};

			},
			methods: {
				Up() {
					$.post("/ShopServlet", function(data) {
						ShopData = JSON.parse(data);
					});
					this.tableData = ShopData;
					console.log(this);
				},
				Plus() {
					const newObj = {
						ShopId: "",
						ShopName: "",
						ShopPrice: "",
						ShopType: "",
						ShopDetail: ""
					};
					newObj.ShopName = this.form.ShopName;
					newObj.ShopPrice = this.form.ShopPrice;
					newObj.ShopType = this.form.ShopType;
					newObj.ShopDetail = this.form.ShopDetail;
					var Data = newObj;
					// delete newObj.ShopId;
					var JD = JSON.stringify(Data);
					console.log(JD);
					$.post("http://localhost/ShopPlusServlet", {
							data: JD
						},
						function(data) {
							newObj.ShopId = data;
						});
					this.dialogFormVisible = false;
				},
				Plus_No() {
					this.dialogFormVisible = false;
				},
				deleteGround_Yes() {
					$.post("http://localhost/DeleteShopServlet", {
							data: this.Delete.Id
						},
						function() {

						});
					this.dialogFormVisible2 = false;
				},
				deleteGround_No() {
					this.dialogFormVisible2 = false;
				},
				rowStyle() {
					return "text-align:center";
				},
				adduser() {

					this.dailogTitleType = "添加商品";
					this.dialogFormVisible = true;
					this.dialogFormVisible2 = false;
					console.log(this.tableData);
				},
				DeleteShop() {

					this.dailogTitleType = "删除商品";
					this.dialogFormVisible = false;
					this.dialogFormVisible2 = true;

				},
				handleRemove(file, fileList) {
					console.log(file, fileList);
				},
				handlePreview(file) {
					console.log(file);
				},
				handleExceed(files, fileList) {
					this.$message.warning(
						`当前限制选择 1个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
				},
				HttpRequest(param) {
					this.form.Files.append('file', param.file);
					console.log(param.file)
					var FileController = "http://localhost:80/UploadServlet"; //此处填写servlet路径
					var xhr = new XMLHttpRequest();
					xhr.open("post", FileController, true);
					xhr.onload = function() {
						// alert("上传完成!");
					};
					xhr.send(this.form.Files);
				}
			},


		});
	</script>
</html>
